<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="登录">
        <el-form :model="loginForm" :rules="loginFormRules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item class="forgetParent">
            <span class="forget" @click="forget">忘记密码</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="loginBtn" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册">
        <el-form ref="registerformRef" :model="registerForm" :rules="registerFormRules">
          <el-form-item prop="username">
            <el-input
              @focus="clearRule('username')"
              v-model="registerForm.username"
              placeholder="手机号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="captcha" class="sendnumParent">
            <el-input
              @focus="clearRule('captcha')"
              class="num"
              v-model="registerForm.captcha"
              placeholder="验证码"
            ></el-input>
            <button @click.prevent="sendNum" class="sendnum">发送验证码</button>
          </el-form-item>
          <el-form-item prop="nickname">
            <el-input
              @focus="clearRule('nickname')"
              v-model="registerForm.nickname"
              placeholder="昵称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              @focus="clearRule('password')"
              v-model="registerForm.password"
              placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password2">
            <el-input
              type="password"
              @focus="clearRule('password2')"
              v-model="registerForm.password2"
              placeholder="确认密码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register" class="loginBtn">注册</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const validateUsername = (rule, value, callback) => {
      const reg = /^1[3456789]\d{9}$/
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入合法的手机号'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '13800138000',
        password: '123456'
      },
      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      registerForm: {
        username: '', //手机号码
        nickname: '', //昵称
        captcha: '', //验证码
        password: '', //密码
        password2: ''
      },
      registerFormRules: {
        username: [{ validator: validateUsername, trigger: 'blur' }],
        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        password2: [{ validator: validatePass, trigger: 'blur' }]
      }
    }
  },
  mounted() {},
  methods: {
    forget() {
      this.$message.warning('该功能还在开发中')
    },
    sendNum() {
      this.$refs.registerformRef.validateField('username', msg => {
        if (!msg) {
          setTimeout(() => {
            this.$message.success('模拟验证码000000')
          }, 2000)
          this.$axios({
            url: '/captchas',
            tel: this.registerForm.username
          }).then(res => {
            console.log(res.data)
          })
        }
      })
    },
    login() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.$store
            .dispatch('user/login', { data: this.loginForm, this: this })
            .then(res => {
              // 当前是不是订单页
              /* if (this.$route.query.order) {
                this.$router.replace({
                  path: '/air/order',
                  query: store.state.setAirinfo
                })
              } else {
                // 跳回到首页
                this.$message.success('登录成功，正在跳转到首页...')
                setTimeout(() => {
                  this.$router.replace('/')
                }, 2000)
              } */
              // 如果是订单页做弹框登录
              if(this.$route.path=='/user/login'){
                // 跳回到首页
                this.$message.success('登录成功，正在跳转到首页...')
                setTimeout(() => {
                  this.$router.replace('/')
                }, 2000)
              }else{
                // 关闭登录框
                this.$emit('DialogClose')
              }
            })
        }
      })
    },
    clearRule(name) {
      this.$refs.registerformRef.clearValidate(name)
    },
    register() {
      this.$refs.registerformRef.validate(valid => {
        if (valid) {
          delete this.registerForm.password2
          this.$axios({
            url: `/accounts/register`,
            method: 'POST',
            data: this.registerForm
          }).then(res => {
            if (res.data.token) {
              this.$message.success('注册成功')
              this.$refs.registerformRef.resetFields()
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-tabs__nav {
  width: 100%;
}
/deep/ .el-tabs__item {
  width: 50%;
  text-align: center;
  border: none;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  background: #eeeeee;
  &.is-active {
    // border-top: 2px solid #409eff;
    height: 51px;
    background: #fff;
  }
}
.forgetParent {
  margin: 0;
}
//忘记密码
.forget {
  color: #409eff;
  text-align: right;
  display: block;
  font-size: 12px;
  cursor: pointer;
}
.loginBtn {
  width: 100%;
}
.el-tabs--border-card > .el-tabs__header {
  background-color: transparent;
  border: none;
  margin: 0;
}
/deep/ .el-tabs__nav-wrap {
  overflow: hidden;
  margin-bottom: -2px;
  position: relative;
}
// 注册
.sendnumParent {
  position: relative;
  /deep/ .el-input__inner {
    border-radius: 4px 0 0 4px;
  }
  .num {
    width: 260px;
  }
  .sendnum {
    position: absolute;
    z-index: 33;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    height: 41px;
    border: 1px solid #edeff3;
    border-left: none;
    padding: 0 20px;
    color: #909399;
    background: #f5f7fa;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    outline: none;
  }
}
</style>